<template>
	<view class="container">
		<!-- 订单状态卡片 -->
		<view class="status-card">
			<view class="status-content">
				<view class="status-icon">
					<uv-icon name="checkmark-circle" color="#fe5400" size="36"></uv-icon>
				</view>
				<view class="status-info">
					<text class="status-text">{{ getStatusText(orderState) }}</text>
					<text class="status-desc">{{ getStatusDesc(orderState) }}</text>
				</view>
				<view class="order-no">
					<text>订单号：{{ orderNo }}</text>
				</view>
			</view>
		</view>

		<!-- 订单进度条 -->
		<view class="progress-card">
			<view class="progress-bar">
				<view class="progress-fill" :style="{width: getProgressWidth()}"></view>
				<view class="progress-dots">
					<view class="dot" :class="{'active': orderState >= 0}"></view>
					<view class="dot" :class="{'active': orderState >= 1}"></view>
					<view class="dot" :class="{'active': orderState >= 2}"></view>
					<view class="dot" :class="{'active': orderState >= 3}"></view>
					<view v-if="orderDetail.state == 7" class="dot" :class="{'active': orderState >= 7}"></view>
					<view v-else class="dot" :class="{'active': orderState >= 4}"></view>
				</view>
			</view>
			<view class="progress-labels">
				<view class="label">
					<text class="label-title">下单</text>
					<text class="label-time">{{ createtimeText }}</text>
				</view>
				<view class="label">
					<text class="label-title">付款</text>
					<text class="label-time">{{ paymenttimeText }}</text>
				</view>
				<view class="label">
					<text class="label-title">发货</text>
					<text class="label-time">{{ delivertimeText }}</text>
				</view>
				<view class="label">
					<text class="label-title">收货</text>
					<text class="label-time">{{ taketimeText }}</text>
				</view>
				<view class="label" v-if="orderDetail.state == 7">
					<text class="label-title">取消</text>
					<text class="label-time">{{ dealtimeText }}</text>
				</view>
				<view class="label" v-else>
					<text class="label-title">完成</text>
					<text class="label-time">{{ dealtimeText }}</text>
				</view>
			</view>
		</view>

		<!-- 商品信息 -->
		<view class="card">
			<view class="card-header">
				<text class="card-title">商品信息</text>
			</view>
			<view class="card-content">
				<!-- 商品卡片 -->
				<view class="goods-card" v-for="(goods, index) in orderGoods" :key="index">
					<view class="goods-header">
						<text class="goods-title">{{ goods.title || '商品标题' }}</text>
						<view class="goods-status">
							<text class="status-tag"
								:class="getGoodsStatusClass[goods.status]">{{ goods.status_text || '正常' }}</text>
						</view>
					</view>

					<view class="goods-content">
						<!-- 商品图片 -->
						<view class="goods-image-wrapper">
							<image class="goods-image" :src="goods.image" mode="aspectFill" @error="handleImageError">
							</image>
						</view>

						<!-- 商品详情 -->
						<view class="goods-details">
							<view class="goods-specs">
								<text class="spec-item">
									<text class="spec-label">型号：</text>
									<text class="spec-value">{{ goods.model || '未知型号' }}</text>
								</text>
								<text class="spec-item">
									<text class="spec-label">包装：</text>
									<text class="spec-value">{{ goods.package || '标准包装' }}</text>
								</text>
								<text class="spec-item">
									<text class="spec-label">品牌：</text>
									<text class="spec-value">{{ goods.brand_id_text || '未知品牌' }}</text>
								</text>
							</view>

							<view class="goods-prices">
								<view class="price-row">
									<text class="price-label">单价</text>
									<text class="price-value">¥{{ goods.real_price || '0.00' }}</text>
								</view>
								<view class="price-row">
									<text class="price-label">数量</text>
									<text class="price-value">×{{ goods.number || '0' }}</text>
								</view>
								<view class="price-row total">
									<text class="price-label">小计</text>
									<text class="price-value total-price">¥{{ goods.actual_payment || '0.00' }}</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<!-- 价格汇总 -->
				<view class="price-summary">
					<view class="summary-divider"></view>
					<view class="summary-item">
						<text class="label">商品总价</text>
						<text class="value">¥{{ payOrderPrice }}</text>
					</view>
					<view class="summary-item">
						<text class="label">优惠金额</text>
						<text class="value discount">-¥{{ payDiscountPrice }}</text>
					</view>
					<view class="summary-item total">
						<text class="label">实付金额</text>
						<text class="value total-price">¥{{ payPrice }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 付款信息 -->
		<view class="card" v-if="orderState >= 2 && orderState != 7">
			<view class="card-header">
				<text class="card-title">付款信息</text>
			</view>
			<view class="card-content">
				<view class="info-list">
					<view class="info-item">
						<text class="info-label">交易号</text>
						<text class="info-value">{{ payNo }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">支付方式</text>
						<text class="info-value">{{ getPayTypeText(payType) }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">交易订单号</text>
						<text class="info-value">{{ tradeNo }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">付款状态</text>
						<text class="info-value">{{ getPayStateText(payState) }}</text>
					</view>
					<view class="info-item">
						<text class="info-label">付款时间</text>
						<text class="info-value">{{ paymenttimeText }}</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 发货状态 -->
		<view class="card" v-if="orderState >= 3 && orderState != 7">
			<view class="card-header">
				<text class="card-title">发货状态</text>
			</view>
			<view class="card-content">
				<view class="shipment-info">
					<view class="shipment-item">
						<text class="shipment-label">快递公司</text>
						<text class="shipment-value">{{ expressName || '-' }}</text>
					</view>
					<view class="shipment-item">
						<text class="shipment-label">快递单号</text>
						<text class="shipment-value">{{ expressNo || '-' }}</text>
					</view>
					<view class="shipment-item">
						<text class="shipment-label">物流状态</text>
						<text class="shipment-value">{{ expressStatus || '-' }}</text>
					</view>
					<view class="shipment-item full-width">
						<text class="shipment-label">物流信息</text>
						<text class="shipment-value">{{ expressContext || '-' }}</text>
					</view>
					<view class="shipment-item">
						<text class="shipment-label">更新时间</text>
						<text class="shipment-value">{{ expressTime || '-' }}</text>
					</view>
				</view>
				<view class="shipment-actions">
					<uv-button type="primary" size="small" @click="viewExpress" :disabled="!expressNo">查看物流</uv-button>
					<uv-button type="default" size="small" @click="updateShipment" v-if="!expressNo">更新发货</uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: '',
				orderNo: '',
				orderDetail: null,
				loading: false
			};
		},
		computed: {
			// 订单状态
			orderState() {
				return this.orderDetail && this.orderDetail.state ? this.orderDetail.state : 0;
			},
			// 支付状态
			payState() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.pay_state ?
					this.orderDetail.pay.pay_state : 0;
			},
			// 时间信息
			createtimeText() {
				return this.orderDetail && this.orderDetail.createtime_text ? this.orderDetail.createtime_text : '-';
			},
			paymenttimeText() {
				return this.orderDetail && this.orderDetail.paymenttime_text ? this.orderDetail.paymenttime_text : '-';
			},
			delivertimeText() {
				return this.orderDetail && this.orderDetail.delivertime_text ? this.orderDetail.delivertime_text : '-';
			},
			taketimeText() {
				return this.orderDetail && this.orderDetail.taketime_text ? this.orderDetail.taketime_text : '-';
			},
			dealtimeText() {
				return this.orderDetail && this.orderDetail.dealtime_text ? this.orderDetail.dealtime_text : '-';
			},
			// 用户信息
			userNickname() {
				return this.orderDetail && this.orderDetail.user && this.orderDetail.user.nickname ?
					this.orderDetail.user.nickname : '未知用户';
			},
			// 商品信息
			orderGoods() {
				return this.orderDetail && this.orderDetail.ordergoods ? this.orderDetail.ordergoods : [];
			},
			// 支付信息
			payOrderPrice() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.order_price ?
					this.orderDetail.pay.order_price : '0.00';
			},
			payDiscountPrice() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.discount_price ?
					this.orderDetail.pay.discount_price : '0.00';
			},
			payPrice() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.price ?
					this.orderDetail.pay.price : '0.00';
			},
			payType() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.pay_type ?
					this.orderDetail.pay.pay_type : '';
			},
			payNo() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.pay_no ?
					this.orderDetail.pay.pay_no : '';
			},
			tradeNo() {
				return this.orderDetail && this.orderDetail.pay && this.orderDetail.pay.trade_no ?
					this.orderDetail.pay.trade_no : '';
			},
			// 优惠券信息
			couponId() {
				return this.orderDetail && this.orderDetail.coupon_id ? this.orderDetail.coupon_id : 0;
			},
			couponName() {
				return this.orderDetail && this.orderDetail.coupon && this.orderDetail.coupon.name ?
					this.orderDetail.coupon.name : '';
			},
			// 物流信息
			expressName() {
				return this.orderDetail && this.orderDetail.express_name ? this.orderDetail.express_name : null;
			},
			expressNo() {
				return this.orderDetail && this.orderDetail.express_no ? this.orderDetail.express_no : null;
			},
			expressStatus() {
				return this.orderDetail && this.orderDetail.express_info && this.orderDetail.express_info.status ?
					this.orderDetail.express_info.status : null;
			},
			expressContext() {
				return this.orderDetail && this.orderDetail.express_info && this.orderDetail.express_info.context ?
					this.orderDetail.express_info.context : null;
			},
			expressTime() {
				return this.orderDetail && this.orderDetail.express_info && this.orderDetail.express_info.time ?
					this.orderDetail.express_info.time : null;
			},
			// 买家留言
			remarks() {
				return this.orderDetail && this.orderDetail.remarks ? this.orderDetail.remarks : '';
			},
			// 地址信息
			addressName() {
				return this.orderDetail && this.orderDetail.address && this.orderDetail.address.name ?
					this.orderDetail.address.name : '';
			},
			addressMobile() {
				return this.orderDetail && this.orderDetail.address && this.orderDetail.address.mobile ?
					this.orderDetail.address.mobile : '';
			},
			addressFull() {
				if (this.orderDetail && this.orderDetail.address) {
					const address = this.orderDetail.address;
					return (address.address || '') + (address.address_name ? '-' + address.address_name : '');
				}
				return '';
			}
		},
		onLoad(options) {
			if (options.order_id && options.order_no) {
				this.orderId = options.order_id;
				this.orderNo = options.order_no;
				this.loadData();
			} else {
				this.$wanlshop.msg('参数错误');
				setTimeout(() => {
					uni.navigateBack();
				}, 1500);
			}
		},
		methods: {
			// 加载详情
			async loadData() {
				this.loading = true;
				try {
					const res = await uni.$uv.http.get('/supplier/getOrderDetail', {
						params: {
							order_id: this.orderId,
							order_no: this.orderNo
						}
					});

					if (res && res.res && res.res.code === 1) {
						this.orderDetail = res.res.data;
					} else {
						const msg = res && res.res && res.res.msg ? res.res.msg : '获取订单详情失败';
						this.$wanlshop.msg(msg);
					}
				} catch (error) {
					console.error('获取订单详情失败:', error);
					this.$wanlshop.msg('获取失败，请稍后重试');
				} finally {
					this.loading = false;
				}
			},

			// 发货操作
			handleShip() {
				uni.navigateTo({
					url: '/pages/order/ship?order_id=' + this.orderId + '&order_no=' + this.orderNo
				});
			},

			// 联系买家
			handleContact() {
				if (this.addressMobile) {
					uni.makePhoneCall({
						phoneNumber: this.addressMobile
					});
				} else {
					this.$wanlshop.msg('暂无联系方式');
				}
			},

			// 取消订单
			handleCancel() {
				uni.showModal({
					title: '确认取消',
					content: '确定要取消此订单吗？',
					success: (res) => {
						if (res.confirm) {
							this.cancelOrder();
						}
					}
				});
			},

			// 取消订单请求
			async cancelOrder() {
				try {
					const res = await uni.$uv.http.post('/supplier/cancelOrder', {
						order_id: this.orderId,
						order_no: this.orderNo
					});

					if (res && res.code === 1) {
						this.$wanlshop.msg('订单已取消');
						setTimeout(() => {
							uni.navigateBack();
						}, 1500);
					} else {
						const msg = res && res.msg ? res.msg : '取消订单失败';
						this.$wanlshop.msg(msg);
					}
				} catch (error) {
					console.error('取消订单失败:', error);
					this.$wanlshop.msg('取消失败，请稍后重试');
				}
			},

			// 查看物流
			viewExpress() {
				if (this.orderId) {
					this.$wanlshop.to(`/pages/supplier/order/express?order_id=${this.orderId}`)
				}
			},

			// 更新发货信息
			updateShipment() {
				uni.navigateTo({
					url: '/pages/order/updateShipment?order_id=' + this.orderId + '&order_no=' + this.orderNo
				});
			},

			// 获取进度条宽度
			getProgressWidth() {
				const progressMap = {
					'0': '0%',
					'1': '25%',
					'2': '50%',
					'3': '75%',
					'4': '100%',
					'7': '100%'
				};
				return progressMap[this.orderState] || '0%';
			},

			// 获取状态文本
			getStatusText(state) {
				const statusMap = {
					'0': '待付款',
					'1': '待发货',
					'2': '待发货',
					'3': '已发货',
					'4': '已完成',
					'7': '已取消'
				};
				return statusMap[state] || '未知状态';
			},

			// 获取状态描述
			getStatusDesc(state) {
				const descMap = {
					'0': '等待买家付款',
					'1': '买家已付款，请尽快处理',
					'2': '买家已付款，请尽快发货',
					'3': '商品已发出',
					'4': '订单已完成',
					'7': '订单已取消'
				};
				return descMap[state] || '订单状态异常';
			},

			// 获取状态文本
			getStateText(state) {
				const stateMap = {
					'0': '待付款',
					'1': '待发货',
					'2': '待发货',
					'3': '已发货',
					'4': '已完成',
					'7': '已取消'
				};
				return stateMap[state] || '未知状态';
			},

			// 获取支付方式文本
			getPayTypeText(type) {
				const typeMap = {
					'0': '余额支付',
					'1': '微信支付',
					'2': '支付宝支付'
				};
				return typeMap[type] || '未知支付方式';
			},

			// 获取支付状态文本
			getPayStateText(state) {
				const stateMap = {
					'0': '未支付',
					'1': '已支付'
				};
				return stateMap[state] || '未知状态';
			},

			// 获取支付方式样式类
			getPayTypeClass(type) {
				const classMap = {
					'0': 'tag-primary',
					'1': 'tag-success',
					'2': 'tag-blue'
				};
				return classMap[type] || 'tag-primary';
			},

			// 获取状态样式类
			getStateClass(state) {
				const classMap = {
					'0': 'tag-gray',
					'1': 'tag-orange',
					'2': 'tag-orange',
					'3': 'tag-blue',
					'4': 'tag-success',
					'5': 'tag-danger'
				};
				return classMap[state] || 'tag-gray';
			},

			// 获取支付状态样式类
			getPayStateClass(state) {
				const classMap = {
					'0': 'tag-danger',
					'1': 'tag-success'
				};
				return classMap[state] || 'tag-gray';
			},

			// 获取商品状态样式类
			getGoodsStatusClass(status) {
				const classMap = {
					'normal': 'status-normal',
					'refund': 'status-refund',
					'return': 'status-return'
				};
				return classMap[status] || 'status-normal';
			},

			// 图片加载失败处理
			handleImageError(e) {
				console.log('图片加载失败:', e);
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 商品信息部分样式优化 */
	.goods-card {
		background: #fff;
		border-radius: 12rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		border: 1rpx solid #f0f0f0;
	}

	.goods-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
		padding-bottom: 16rpx;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.goods-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
		flex: 1;
		margin-right: 20rpx;
	}

	.goods-status {
		flex-shrink: 0;
	}

	.status-tag {
		font-size: 20rpx;
		padding: 6rpx 12rpx;
		border-radius: 20rpx;
	}

	.status-normal {
		background: rgba(82, 196, 26, 0.1);
		color: #52c41a;
	}

	.status-refund {
		background: rgba(250, 140, 22, 0.1);
		color: #fa8c16;
	}

	.status-return {
		background: rgba(255, 77, 79, 0.1);
		color: #ff4d4f;
	}

	.goods-content {
		display: flex;
		align-items: flex-start;
	}

	.goods-image-wrapper {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		overflow: hidden;
		margin-right: 20rpx;
		flex-shrink: 0;
		background: #f8f9fa;
	}

	.goods-image {
		width: 100%;
		height: 100%;
	}

	.goods-details {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.goods-specs {
		margin-bottom: 20rpx;
	}

	.spec-item {
		display: block;
		font-size: 24rpx;
		color: #666;
		margin-bottom: 8rpx;
	}

	.spec-label {
		color: #999;
	}

	.spec-value {
		color: #333;
	}

	.goods-prices {
		display: flex;
		flex-direction: column;
		gap: 12rpx;
	}

	.price-row {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.price-row.total {
		border-top: 1rpx solid #f5f5f5;
		padding-top: 12rpx;
		margin-top: 4rpx;
	}

	.price-label {
		font-size: 24rpx;
		color: #666;
	}

	.price-value {
		font-size: 24rpx;
		color: #333;
	}

	.total-price {
		color: #fe5400;
		font-weight: 600;
		font-size: 28rpx;
	}

	/* 价格汇总优化 */
	.price-summary {
		margin-top: 24rpx;
		padding-top: 24rpx;
	}

	.summary-divider {
		height: 1rpx;
		background: #f0f0f0;
		margin-bottom: 20rpx;
	}

	.summary-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}

	.summary-item.total {
		border-top: 1rpx solid #f5f5f5;
		padding-top: 16rpx;
		margin-top: 8rpx;
	}

	.summary-item .label {
		font-size: 26rpx;
		color: #666;
	}

	.summary-item .value {
		font-size: 26rpx;
		color: #333;
	}

	.summary-item .discount {
		color: #52c41a;
	}

	.summary-item .total-price {
		font-size: 32rpx;
		color: #fe5400;
		font-weight: 600;
	}

	/* 其他原有样式保持不变 */
	.container {
		padding: 20rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
		padding-bottom: 120rpx;
	}

	/* 状态卡片 */
	.status-card {
		background: linear-gradient(135deg, #fff 0%, #fff 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(254, 84, 0, 0.08);
		border: 1rpx solid rgba(254, 84, 0, 0.1);
	}

	.status-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.status-icon {
		margin-right: 20rpx;
	}

	.status-info {
		flex: 1;
		display: flex;
		flex-direction: column;
	}

	.status-text {
		font-size: 32rpx;
		font-weight: 600;
		color: #fe5400;
		margin-bottom: 8rpx;
	}

	.status-desc {
		font-size: 24rpx;
		color: #666;
	}

	.order-no {
		font-size: 24rpx;
		color: #999;
	}

	/* 进度条卡片 */
	.progress-card {
		background: #fff;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
	}

	.progress-bar {
		height: 8rpx;
		background: #f0f0f0;
		border-radius: 4rpx;
		position: relative;
		margin: 40rpx 0 60rpx;
	}

	.progress-fill {
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		border-radius: 4rpx;
		background: linear-gradient(90deg, #fe5400, #ff8c42);
		transition: width 0.3s ease;
	}

	.progress-dots {
		position: absolute;
		top: -12rpx;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-between;
	}

	.dot {
		width: 32rpx;
		height: 32rpx;
		border-radius: 50%;
		background: #f0f0f0;
		border: 4rpx solid #fff;
		transition: all 0.3s ease;
	}

	.dot.active {
		background: #fe5400;
		box-shadow: 0 0 0 4rpx rgba(254, 84, 0, 0.2);
	}

	.progress-labels {
		display: flex;
		justify-content: space-between;
	}

	.label {
		display: flex;
		flex-direction: column;
		align-items: center;
		flex: 1;
	}

	.label-title {
		font-size: 24rpx;
		color: #333;
		margin-bottom: 8rpx;
		font-weight: 500;
	}

	.label-time {
		font-size: 20rpx;
		color: #999;
		text-align: center;
	}

	/* 卡片样式 */
	.card {
		background: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.04);
		overflow: hidden;
	}

	.card-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #f5f5f5;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.card-title {
		font-size: 28rpx;
		color: #333;
		font-weight: 600;
	}

	.card-content {
		padding: 30rpx;
	}

	/* 信息列表 */
	.info-list,
	.shipment-info {
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.info-item,
	.shipment-item {
		display: flex;
		align-items: center;
	}

	.shipment-item.full-width {
		align-items: flex-start;
	}

	.info-label,
	.shipment-label {
		font-size: 26rpx;
		color: #666;
		width: 180rpx;
		flex-shrink: 0;
	}

	.info-value,
	.shipment-value {
		font-size: 26rpx;
		color: #333;
		flex: 1;
	}

	/* 发货操作 */
	.shipment-actions {
		display: flex;
		justify-content: flex-end;
		gap: 20rpx;
		margin-top: 30rpx;
	}

	/* 响应式调整 */
	@media (max-width: 750px) {
		.container {
			padding: 15rpx;
			padding-bottom: 120rpx;
		}

		.status-card,
		.progress-card,
		.card {
			border-radius: 16rpx;
			padding: 25rpx;
		}

		.card-header,
		.card-content {
			padding: 25rpx;
		}

		.progress-labels {
			flex-wrap: wrap;
		}

		.label {
			min-width: 20%;
			margin-bottom: 20rpx;
		}

		.goods-card {
			padding: 20rpx;
		}

		.goods-image-wrapper {
			width: 140rpx;
			height: 140rpx;
		}
	}
</style>